<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/chang.ico">
    <title>飞机大战</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 点击爱心 -->
    <script src="./js/love.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="./index.html">首页</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="./photos.html?id=1">相册</a></li>
                        <li><a href="./video.html">视频</a></li>
                        <li><a href="./game.html">游戏</a></li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control searchInput" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default" onclick="search()">搜索</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <canvas id="canvas"></canvas>
    </main>
    <!-- 脚部 -->
    <footer>
      
    </footer>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <script>
        let canvas = document.querySelector('#canvas')
        let ctx = canvas.getContext('2d')
        let player = new Image()
        player.src = './images/player.png'
        player.locationX = 140
        player.locationY = 130
        player.width = 30
        player.height = 15
        player.step = 1
        player.onload = function () {
            ctx.drawImage(this, player.locationX, player.locationY, player.width, player.height)
        }
        //玩家移动函数
        function playerMove(player, x, y) {
            ctx.clearRect(x - player.step, y - player.step, player.width + player.step, player.height + player.step)
            crackWatch(player)
            ctx.drawImage(player, x, y, player.width, player.height)
        }
        //玩家碰撞检测
        function crackWatch(obj) {
            obj.locationX <= 0 ? obj.locationX = 0 : ''
            obj.locationY <= 0 ? obj.locationY = 0 : ''
            obj.locationX + obj.width >= canvas.width ? obj.locationX = (canvas.width - obj.width) : ''
            obj.locationY + obj.height >= canvas.height ? obj.locationY = (canvas.height - obj.height) : ''
        }
        //子弹碰撞检测
        function shotCrack(bullet,enemy,){
           
        }
        //发射子弹
        function shot(player) {
            let bullet = new Image()
            bullet.src = './images/bullet.png'
            bullet.width = 5
            bullet.height = 5
            bullet.locationX = player.locationX + (player.width / 2.0) - 3 //枪口X位置
            bullet.locationY = player.locationY //枪口Y位置
            bullet.step = 10 //子弹速度
            bullet.onload = function () {
                let bulletObj = setInterval(function () {
                    ctx.drawImage(bullet, bullet.locationX, bullet.locationY -= bullet.step, bullet.width, bullet.height)

                    ctx.clearRect(bullet.locationX, bullet.locationY + bullet.step, bullet.width, bullet.height)
                    if (bullet.locationY <= 0)
                        clearTimeout(bulletObj)
                }, 20)
            }
        }
        //生成敌人
        function creatEnemy(){
            let enemy = new Image()
            enemy.src = './images/enimy.png'
            enemy.width = 30
            enemy.height = 15
            enemy.locationX = Math.floor(Math.random()*1000)%300
            enemy.locationY = enemy.height
            enemy.step = 1 //敌人速度
            enemy.onload = function(){
                let enemyObj = setInterval (function(){
                    ctx.drawImage(enemy, enemy.locationX, enemy.locationY+=enemy.step, enemy.width, enemy.height)
                    ctx.clearRect(enemy.locationX, enemy.locationY-enemy.step, enemy.width, enemy.step*5)
                    if(enemy.locationY+enemy.height>=400)
                    clearTimeout(enemyObj)
                },10)
            }
        }
        setInterval(function(){
            creatEnemy()
        },1000)
        //监听键盘
        window.addEventListener('keydown', function (e) {
            // console.log(e.keyCode);
            switch (e.keyCode) {
                case 37:
                    let timeObj = setInterval(function () {
                        playerMove(player, player.locationX -= player.step*2, player.locationY)
                        window.addEventListener('keyup', function (e) {
                            if (e.keyCode == 37)
                                clearTimeout(timeObj)
                        })
                    }, 10)
                    // console.log('左');
                    break
                case 39:
                    // console.log('右');
                    let timeObj1 = setInterval(function () {
                        playerMove(player, player.locationX += player.step*2, player.locationY)
                        window.addEventListener('keyup', function (e) {
                            if (e.keyCode == 39)
                                clearTimeout(timeObj1)
                        })
                    }, 10)
                    break
                case 38:
                    // console.log('上');
                    let timeObj2 = setInterval(function () {
                        playerMove(player, player.locationX, player.locationY -= player.step)
                        window.addEventListener('keyup', function (e) {
                            if (e.keyCode == 38)
                                clearTimeout(timeObj2)
                        })
                    }, 10)
                    break
                case 40:
                    // console.log('下');
                    let timeObj3 = setInterval(function () {
                        playerMove(player, player.locationX, player.locationY += player.step)
                        window.addEventListener('keyup', function (e) {
                            if (e.keyCode == 40)
                                clearTimeout(timeObj3)
                        })
                    }, 10)
                    break
                case 32:
                    // console.log('空格');
                    shot(player)
                default:
                // console.log(e.keyCode);
            }
        })

    </script>
</body>

</html>